<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      width="500"
      :title="ruleForm.id === 0 ? '新增账号' : '编辑账号'"
      :before-close="handleClose"
    >
      <div>
        <el-form
          ref="ruleFormRef"
          style="max-width: 400px"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          status-icon
        >
          <!-- <el-form-item label="头像" prop="photo">
            <el-upload
              class="avatar-uploader"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item> -->

          <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入姓名" />
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="ruleForm.mobile" placeholder="请输入手机号" />
          </el-form-item>
          <el-form-item label="账号" prop="username">
            <el-input v-model="ruleForm.username" placeholder="请输入账号" />
          </el-form-item>
          <el-form-item label="密码" prop="pwd">
            <el-input v-model="ruleForm.pwd" placeholder="请输入密码" />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import type { FormInstance, FormRules, UploadProps } from "element-plus";
import { ElMessage } from "element-plus";
import { addcountgUpdate, accountAdd } from "@/api/system/Account/Account";
import { accountAddParams } from "@/api/system/Account/type";
import { Plus } from "@element-plus/icons-vue";

const dialogVisible = ref(true);
const imageUrl = ref("");
const ruleForm = reactive<accountAddParams>({
  id: 0,
  companyId: 0,
  level: 0,
  staffId: 0,
  name: "",
  pwd: "",
  type: 0,
  enable: "",
  photo: "",
  mobile: "",
  username: "",
});

const props = withDefaults(defineProps<{ listParams: accountAddParams }>(), {
  listParams: () => ({
    id: 0,
    companyId: 0,
    level: 0,
    staffId: 0,
    name: "",
    pwd: "",
    type: 0,
    enable: "",
    photo: "",
    mobile: "",
    username: "",
  }),
});
Object.assign(ruleForm, props.listParams);
// 添加
const submitForm = async () => {
  let res = await accountAdd(ruleForm);
  // console.log('添加', res);
  ElMessage.success("添加成功");
  emit("close");
};
const submit = () => {
  ruleFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      ruleForm.id === 0 ? await submitForm() : await update();
    }
  });
};
// 编辑
const update = async () => {
  let res = await addcountgUpdate(ruleForm);
  // console.log("修改", res);
  ElMessage.success("修改成功");
  emit("close");
};

// 表单校验
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules<accountAddParams>>({
  photo: [{ required: true, message: "头像不能为空", trigger: "blur" }],
  name: [{ required: true, message: "房型名称不能为空", trigger: "blur" }],
  mobile: [
    { required: true, message: "手机号不能为空", trigger: "blur" },
    { pattern: /^[0-9]{11}$/, message: "手机号码格式不正确", trigger: "blur" },
  ],
  username: [{ required: true, message: "账号不能为空", trigger: "blur" }],

  pwd: [
    { required: true, message: "密码不能为空", trigger: "blur" },
    { min: 6, message: "密码长度不能少于6位", trigger: "blur" },
  ],
});

const emit = defineEmits(["close"]);
const handleClose = () => {
  emit("close");
};

// 头像

// const handleAvatarSuccess: UploadProps["onSuccess"] = (response, uploadFile) => {
//   imageUrl.value = URL.createObjectURL(uploadFile.raw!);
// };

// const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
//   if (rawFile.type !== "image/jpeg") {
//     ElMessage.error("Avatar picture must be JPG format!");
//     return false;
//   } else if (rawFile.size / 1024 / 1024 > 2) {
//     ElMessage.error("Avatar picture size can not exceed 2MB!");
//     return false;
//   }
//   return true;
// };
</script>
<style scoped>
.avatar-uploader .avatar {
  display: block;
  width: 70px;
  height: 70px;
}

.avatar-uploader .el-upload {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  width: 70px;
  height: 70px;
  font-size: 28px;
  color: #8c939d;
  text-align: center;
}
</style>
